<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
    <div class="aui-content">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="button">
                <a class="aui-arrow-right">按钮</a>
            </li>
            <li class="aui-list-view-cell" data-win="form">
                <a class="aui-arrow-right">表单</a>
            </li>
            <li class="aui-list-view-cell" data-win="switch">
                <a class="aui-arrow-right">switch开关</a>
            </li>
            <li class="aui-list-view-cell" data-win="checkbox">
                <a class="aui-arrow-right">checkbox选择</a>
            </li>
            <li class="aui-list-view-cell" data-win="list">
                <a class="aui-arrow-right">普通列表</a>
            </li>
            <li class="aui-list-view-cell" data-win="list_arrow">
                <a class="aui-arrow-right">带有角标和箭头的列表</a>
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                <a class="aui-arrow-right">缩略图列表</a>
            </li>
            <li class="aui-list-view-cell" data-win="list_image">
                <a class="aui-arrow-right">图片列表布局</a>
            </li>
            <li class="aui-list-view-cell" data-win="header_bar">
                <a class="aui-arrow-right">导航栏</a>
            </li>
            <li class="aui-list-view-cell" data-win="footer_tab">
                <a class="aui-arrow-right">底部工具栏</a>
            </li>
            <!--<li class="aui-list-view-cell" data-win="footer_tab">
                <a class="aui-arrow-right">tab切换导航</a>
            </li>-->
            <li class="aui-list-view-cell" data-win="list_nine">
                <a class="aui-arrow-right">九宫格</a>
            </li>
            <li class="aui-list-view-cell" data-win="list_sixteen">
                <a class="aui-arrow-right">十六宫格</a>
            </li>
            <li class="aui-list-view-cell" data-win="contact_book">
                <a class="aui-arrow-right">通讯录</a>
            </li>
            <li class="aui-list-view-cell" data-win="chat">
                <a class="aui-arrow-right">聊天界面</a>
            </li>
            <li class="aui-list-view-cell" data-win="iconfont">
                <a class="aui-arrow-right">图标</a>
            </li>
            <li class="aui-list-view-cell" data-win="demo_qinghuwai">
                <a class="aui-arrow-right">案例：仿轻户外动态列表效果</a>
            </li>
            <li class="aui-list-view-cell" data-win="demo_list">
                <a class="aui-arrow-right">案例：仿华为花粉俱乐部首页</a>
            </li>
            <li class="aui-list-view-cell" data-win="contact_book">
                <a class="aui-arrow-right">案例：联系人效果</a>
            </li>
            <li class="aui-list-view-cell" data-win="my">
                <a class="aui-arrow-right">案例：会员中心效果</a>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function () {
        var listDom = $api.domAll('li.aui-list-view-cell');
        for(var i in listDom){
            $api.addEvt(listDom[i], 'click', function(){
                var _openWin = $api.attr(this,'data-win');
                api.openWin({
                    name: _openWin,
                    url: _openWin+'_win.html',
                    bounces:true,
                    delay: 300,
                    animation: {
                        duration: 400
                    }
                });
            });
        }
    }
</script>
</html>